<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <!-- meta:kw -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- link:favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 按顺序引入: 外链式样式表后写的生效 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font_3228114_zh63fky4dma/iconfont.css">

</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">请先登录</a></li>
                <li><a href="#"><span></span>请先登录</a></li>
            </ul>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!-- 定位 放大镜 -->
            <span></span>
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div>

    <div class="main">
        <div class="wrapper">
            <div class="context">
                <div class="aside">

                    <div class="count">
                        <ul>
                            <li>我的账户</li>
                            <li>个人中心</li>
                            <li>消息通知</li>
                            <li>安全信息</li>
                            <li>地址管理</li>
                            <li>我的积分</li>
                            <li>安全信息</li>
                            <li>地址管理</li>
                            <li>我的积分</li>
                        </ul>
                    </div>

                    <div class="jiaoyi">
                        <ul>
                            <li>安全信息</li>
                            <li>地址管理</li>
                            <li>我的积分</li>
                            <li>安全信息</li>
                            <li>地址管理</li>
                            <li>我的积分</li>
                        </ul>
                    </div>
                    <div class="help">
                        <ul>
                            <li>帮助中心</li>
                            <li>地址管理</li>
                            <li>我的积分</li>
                        </ul>
                    </div>
                </div>
                <div class="rightaside">
                    <div class="user">
                        <div class="face">
                            <img src="./uploads/avatar_1.png" style="width:99px;height:99px ;" alt="">
                            <span>张某某</span>
                        </div>
                        <div class="list">

                            <a href="#"><span class="iconfont icon-shouye"></span></a>

                            <a href="#"><span class="iconfont icon-anquanshezhi"></span></a>


                            <a href="#"><span class="iconfont icon-huiyuan"></span></a>
                            <div class="name">
                                <p>会员中心</p>
                                <p>会员中心</p>
                                <p>会员中心</p>

                            </div>

                        </div>
                    </div>

                    <div class="order">
                        <div class="title">
                            <h3>我的订单</h3>
                            <a href="#"> <span>查看全部></span></a>
                        </div>

                        <div class="colude">
                            <div class="goods">
                                <img src="./uploads/clothes_goods_5.jpg" alt="">
                                <div class="pailie">
                                    <h4>拉夫劳伦t恤男正品圆领短袖...</h4>
                                    <p>颜色：白色 尺码：M 数量：1</p>
                                </div>

                            </div>
                            <div class="news">
                                <p>待付款</p>
                            </div>
                            <div class="price">
                                <h6>￥99.00</h6>
                                <p>（含运费：¥10.00元）</p>
                                <p>在线支付</p>

                            </div>
                            <div class="pay">
                                <button>立即付款</button>
                                <a href="#">查看详情</a>
                                <a href="#">取消订单</a>
                            </div>
                        </div>
                        <!-- 分割线 -->
                        <div class="jiange"> </div>

                        <div class="colude">
                            <div class="goods">
                                <img src="./uploads/clothes_goods_5.jpg" alt="">
                                <div class="pailie">
                                    <h4>拉夫劳伦t恤男正品圆领短袖...</h4>
                                    <p>颜色：白色 尺码：M 数量：1</p>
                                </div>

                            </div>
                            <div class="news">
                                <p>待付款</p>
                            </div>
                            <div class="price">
                                <h6>￥99.00</h6>
                                <p>（含运费：¥10.00元）</p>
                                <p>在线支付</p>

                            </div>
                            <div class="pay">
                                <button>立即付款</button>
                                <a href="#">查看详情</a>
                                <a href="#">取消订单</a>
                            </div>
                        </div>

                    </div>

                    <div class="collection">
                        <div class="title">
                            <h3>我的收藏</h3>
                        </div>
                        <div class="mylikes">
                            <div class="coll1">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>
                            </div>
                            <div class="coll2">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>
                            </div>
                            <div class="coll3">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>

                            </div>
                            <div class="coll4">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>

                            </div>

                        </div>
                    </div>

                    <div class="collection">
                        <div class="title">
                            <h3>我的收藏</h3>
                        </div>
                        <div class="mylikes">
                            <div class="coll1">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>
                            </div>
                            <div class="coll2">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>
                            </div>
                            <div class="coll3">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>

                            </div>
                            <div class="coll4">
                                <img src="./uploads/popular_2.jpg" alt="">
                                <p>沙宣经典洗护套装<br> 750ml送200ml<br> 洗护用品 </p>
                                <h3>￥79</h3>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- 版权区域 -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <span>价格亲民</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>
</body>

</html>